<template>
  <div>
    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      border
      ref="table"
      style="width: 100%"
      :header-cell-class-name="$style.headerTable"
      :class="$style.table"
      row-key="id"
      :tree-props="{children: 'children'}"
    >
      <el-table-column v-if="tableConfig.selection" type="selection" align="center" width="55"></el-table-column>
      
      <el-table-column v-if="tableConfig.expand" type="expand">
      <template slot-scope="props">
        <slot name="expand" :data="props.row" />
      </template>
      </el-table-column>
      
      <el-table-column v-bind="item" v-for="(item,index) of tableConfig.columnConfig.filter(Boolean)" :key="index">
        <template slot-scope="scope">
          <template v-if="item.type === 'text'">
            <span>{{ scope.row[item.prop] }}</span>
          </template>
          <template v-else-if="item.type === 'time'">
            <span>{{ scope.row[item.prop] | moment }}</span>
          </template>
          <template v-else-if="item.type === 'other'">
            <span>{{ item.fnc(scope.row[item.prop]) }}</span>
          </template>
          <template v-else-if="item.type === 'img'">
            <img :style="item.style&&item.style" :src="item.baseUrl?item.baseUrl+scope.row[item.prop]:scope.row[item.prop]" alt="">
          </template>
          <template v-else-if="item.type === 'operation'">
            <slot name="operation" :row="scope.row" :index="scope.$index" />
          </template>
          <template v-else-if="item.type === 'slot'">
            <slot :name="item.slotName" :data="scope.row" :item="item" />
          </template>
          <template v-else-if="item.type === 'switch'">
            <el-switch
              :disabled="item.disabled"
              v-model="scope.row[item.prop]"
              :active-value="item.activeVal?item.activeVal:true"
              :inactive-value="item.inactiveVal?item.inactiveVal:false"
              @change="(val)=> item.onChange(scope.row,val)"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <slot name="pager" />
  </div>
</template>
<script>
import Panel from "@/components/Panel";
export default {
  components: {
    Panel
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableConfig: {
      type: Object,
      default: () => ({
        columnConfig: []
      })
    },
    changeSelectRow: {
      type: Function,
      default: () => {}
    },
    rowId: {
      type: String,
      default: 'id'
    }
  },
  watch:{

  },
  data() {
    return {
      multipleSelection: []
    };
  },
  methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$nextTick(() => this.$refs.table.toggleRowSelection(row))
          });
        }
      },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item[this.rowId]);
      this.changeSelectRow([...this.multipleSelection])
    }
  },
  mounted() {},
  created() {

  }
};
</script>
<style module lang='scss'>
.headerTable {
  background-color: #f7f8f9 !important;
  height: 40px;
  padding: 0px;
  color: rgb(161, 163, 167);
  font-size: 12px;


}

.table{
  :global{
    .el-table__body td{
      padding: 8px 0;
    }
  }
}
</style>

